<template>
  <div class="a">
    <div>
      我是一行在app.vue里面的文字内容
      <div>
        <router-link to="/" active-class="abc">首页</router-link>
        <router-link to="/list" active-class="abc">列表页</router-link>
        <!-- active-class的配置标识如果 路由路径匹配的时候 就会加上对应的激活类名 -->
        <router-link to="/detail" active-class="abc">内容页</router-link>
      </div>
    </div>

    <!-- router-view组件叫做路由视图组件 -->
    <router-view />
  </div>
</template>
<style>
.abc {
  border: 1px solid red;
}
</style>
